<template>
  <el-dialog
    top="30px"
    width="800px"
    class="dialog-sm"
    append-to-body
    title="修改历史"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <div v-loading="loading">
      <div class="card p-3 mb-3" v-for="(p, index) of listData" :key="index">
        <div class="d-flex justify-content-between">
          <div>修改时间： {{ $utils.dateFormat(p.create_time, 'yyyy.MM.dd hh:mm:ss') }}</div>
          <div>修改人： {{ p.submit_person_name }}</div>
        </div>
        <div class="mt-3">修改内容：</div>
        <c-table border :stripe="false" :columns="tableColumns" :data="p.update_record_detail">
          <template v-slot:bef="scope">
            <span v-if="scope.row.update_record_field === 'account_type'">
              {{
                enumCaptialAccountType[scope.row.update_record_value_bef] ||
                scope.row.update_record_value_bef
              }}
            </span>
            <span v-else>{{ scope.row.update_record_value_bef }}</span>
          </template>
          <template v-slot:aft="scope">
            <span v-if="scope.row.update_record_field === 'account_type'">
              {{
                enumCaptialAccountType[scope.row.update_record_value_aft] ||
                scope.row.update_record_value_aft
              }}
            </span>
            <span v-else>{{ scope.row.update_record_value_aft }}</span>
          </template>
        </c-table>
      </div>

      <div class="query-pagination">
        <div></div>
        <el-pagination
          layout="total, prev, pager, next, jumper"
          :current-page.sync="params.index"
          :page-size="params.size"
          :total="totalCount"
          @current-change="getData"
        ></el-pagination>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { enumCaptialAccountType } from '@/credit/plugins/enum'
export default {
  props: {
    rowId: String,
    visible: Boolean,
  },
  data() {
    return {
      enumCaptialAccountType,
      order: { create_time: 'desc' },
      params: {
        index: 1,
        size: 2,
        subKey: 'update_record_detail.update_record_id',
      },
      loading: false,
      tableName: 'update_record',
      tableData: [],
      totalCount: 0,
      tableColumns: [
        {
          attrs: { label: '修改字段', prop: 'update_record_field_name', align: 'center' },
        },
        {
          attrs: { label: '修改前内容', prop: 'update_record_value_bef', align: 'center' },
          slot: 'bef',
        },
        {
          attrs: { label: '修改后内容', prop: 'update_record_value_aft', align: 'center' },
          slot: 'aft',
        },
      ],
      listData: [],
    }
  },

  watch: {
    rowId() {
      if (!this.rowId) {
        return
      }
      this.getData()
    },
  },

  created() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    getData() {
      this.params['record_id.eq'] = this.rowId
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = (res && res.data) || {}
          this.totalCount = (data && data.totalCount) || 0
          this.listData = (data && data.data) || []
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>
<style lang="scss" scoped></style>
